<template>
	<div class="shelf-list table-theme">
		<head-title title="运营--货架列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<tabs-view :list="classifyList" :tabsIndex="is_show" @roleType="roleType"></tabs-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<div class="add">
						<el-button type="primary" @click="addShel">添加货架</el-button>
					</div>
				</div>
			</div>
			<p style="height:30px"></p>
			<el-table :data="list" row-key="shelf_id" :tree-props="{ children: 'children'}">
				<el-table-column label="序号" align="center" prop="shelf_id"></el-table-column>
				<el-table-column label="级别" align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.parent_type == 1">{{scope.row.parent_name}}</el-tag>
						<el-tag v-if="scope.row.parent_type == 2" type="success">{{scope.row.parent_name}}</el-tag>
						<el-tag v-if="scope.row.parent_type == 3" type="warning">{{scope.row.parent_name}}</el-tag>
						<el-tag v-if="scope.row.parent_type == 4" type="danger">{{scope.row.parent_name}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="名称" align="center" prop="name"></el-table-column>
				<el-table-column label="副标题" align="center" prop="subtitle"></el-table-column>
				<el-table-column label="图片" align="center" width="100">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="描述" align="center" prop="brief"></el-table-column>
				<el-table-column label="时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="空间名称" align="center" prop="space_name"></el-table-column>
				<el-table-column label="类型" align="center" prop="type_name"></el-table-column>
				<el-table-column label="排序" align="center">
					<template slot-scope="scope">
						<el-input
							v-model="scope.row.sort"
							onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
							@keyup.enter.native="postSort(scope.row.sort, scope.row.shelf_id)"
							@blur="postSort(scope.row.sort, scope.row.shelf_id)"
						></el-input>
					</template>
				</el-table-column>
				<el-table-column label="显示/隐藏" align="center" width="180">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.is_show" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.shelf_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="280">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="clearSync(scope.row.shelf_id)">清除缓存</el-button>
						<el-button type="primary" size="mini" v-if="scope.row.isadd" @click="addChildren(scope.row.shelf_id)">新增</el-button>
						<el-button type="primary" size="mini" @click="addGoods(scope.row.shelf_id)">关联</el-button>
						<el-button type="primary" size="mini" @click="edit(scope.row.shelf_id,scope.row.parent_id)">编辑</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.shelf_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	import addShelves from '@/components/layer-dialog/add-shelves.vue';
	import TabsView from '@/components/TabsView'
	export default {
		components: {
			addShelves,
			ImgPopover,
			TabsView
		},
		data() {
			return {
				list: [], // 列表
				is_show: 0,
				classifyList: ['显示','隐藏'],
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					is_show: this.is_show +1,
					order_by:'sort',
					asc:2
				};

				this.$http(this.$ApiList.ShelfList, data).then(res => {
					this.list = [];
					let menuList = [];
					res.datas.forEach(a => {
						if (a.parent_id == 0) {
							a.isadd = true
							a.parent_name = '一级货架';
							a.parent_type = 1;
						}
						menuList.push(a);
					});
					menuList.forEach(a => {
						let children = [];
						if (a.parent_id == 0) {
							menuList.forEach(b => {
								if (b.parent_id == a.shelf_id) {
									b.parent_name = '二级货架';
									b.parent_type = 2;
									b.isadd = true
									children.push(b);
									a.children = children;
								}
							});
							this.list.push(a);
						}
					});
					this.list.forEach(a => {
						if (a.children) {
							a.children.forEach(b => {
								let children = [];
								menuList.forEach(c => {
									if (c.parent_id == b.shelf_id) {
										c.parent_name = '三级货架';
										c.parent_type = 3;
										c.isadd = true;
										children.push(c);
										b.children = children;
									}
								});
							});
						}
					});
					this.list.forEach(a=>{
						if(a.children){
							a.children.forEach(b=>{
								if(b.children){
									b.children.forEach(c=>{
										let children = [];
										menuList.forEach(d => {
										if (d.parent_id == c.shelf_id) {
											d.parent_name = '四级货架';
											d.parent_type = 4;
											d.isadd = false;
											children.push(d);
											c.children = children;
										}
									});
									})
								}
							})
						}
					})
					console.log(this.list);
				});
			},
			goSearch() {
				this.init();
			},
			roleType(type) {
				this.is_show = type;
				this.init();
			},
			refreshPage() {
				this.page = 1;
				this.is_show = 1;
				this.init();
			},
			addShel() {
				this.$layer.iframe({
					title: '添加货架',
					maxmin: true,
					area: ['50%', '60%'],
					content: {
						content: addShelves, //传递的组件对象
						parent: this, //当前的vue对象
						data: {
							type: 0
						} //props
					}
				});
			},
			edit(id,parent_id) {
				this.$layer.iframe({
					title: '编辑货架',
					maxmin: true,
					area: ['50%', '60%'],
					content: {
						content: addShelves, //传递的组件对象
						parent: this, //当前的vue对象
						data: {
							type: 1,
							id: Number(id),
							parent_id:parent_id
						} //props
					}
				});
			},
			addChildren(id) {
				this.$layer.iframe({
					title: '添加子货架',
					maxmin: true,
					area: ['50%', '60%'],
					content: {
						content: addShelves, //传递的组件对象
						parent: this, //当前的vue对象
						data: {
							type: 0,
							parent_id: id
						} //props
					}
				});
			},
			// 显示/隐藏
			upDown(e, shelf_id) {
				let data = {
					shelf_id: shelf_id,
					is_show: e
				};
				this.$http(this.$ApiList.ShelfDown, data).then(res => {
					this.$layer.msg(res.datas);
					this.init();
				});
			},
			del(shelf_id) {
				let data = {
					shelf_id: shelf_id
				};
				this.$http(this.$ApiList.DelShelf, data).then(res => {
					this.$layer.msg(res.datas);
					this.init();
				});
			},
			postSort(sort, shelf_id) {
				if (sort < 0 || sort == '') {
					this.$layer.msg('请输入正确的排序');
					return;
				}
				let data = {
					sort: sort,
					shelf_id: shelf_id
				};
				this.$http(this.$ApiList.ShelfUp, data).then(res => {
					this.refreshPage()
				});
			},
			addGoods(id) {
				this.$router.push({
					path: '/shelf_edit',
					query: {
						id: id
					}
				});
			},
			async clearSync(shelf_id){
				this.$http(this.$ApiList.DelShelfRedis, {shelf_id})
				this.$layer.msg('清除成功');
			}
		},
		created() {
			this.init();
		}
	};
</script>
